<template>
  <view class="password-container">
    <!-- 头部区域 -->
    <view class="header">
      <text class="title">修改密码</text>
    </view>

    <!-- 密码表单 -->
    <view class="password-form">
      <!-- 旧密码 -->
      <view class="form-item">
        <text class="form-label">当前密码</text>
        <view class="password-input-wrapper">
          <input
            class="form-input"
            :type="oldPasswordVisible ? 'text' : 'password'"
            v-model="formData.oldPassword"
            placeholder="请输入当前密码"
            maxlength="20"
          />
          <text class="toggle-visibility" @tap="toggleOldPasswordVisibility">
            {{ oldPasswordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
      </view>

      <!-- 新密码 -->
      <view class="form-item">
        <text class="form-label">新密码</text>
        <view class="password-input-wrapper">
          <input
            class="form-input"
            :type="newPasswordVisible ? 'text' : 'password'"
            v-model="formData.newPassword"
            placeholder="请输入新密码"
            maxlength="20"
          />
          <text class="toggle-visibility" @tap="toggleNewPasswordVisibility">
            {{ newPasswordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
      </view>

      <!-- 确认新密码 -->
      <view class="form-item">
        <text class="form-label">确认新密码</text>
        <view class="password-input-wrapper">
          <input
            class="form-input"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            v-model="formData.confirmPassword"
            placeholder="请再次输入新密码"
            maxlength="20"
          />
          <text class="toggle-visibility" @tap="toggleConfirmPasswordVisibility">
            {{ confirmPasswordVisible ? '隐藏' : '显示' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="button-section">
      <button class="save-button" @tap="changePassword" :disabled="isLoading">
        {{ isLoading ? '提交中...' : '确认修改' }}
      </button>
    </view>
  </view>
</template>

<script>
import { updatePassword } from '@/api/my'

export default {
  data() {
    return {
      formData: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      oldPasswordVisible: false,
      newPasswordVisible: false,
      confirmPasswordVisible: false,
      isLoading: false,
    }
  },

  methods: {
    // 切换旧密码可见性
    toggleOldPasswordVisibility() {
      this.oldPasswordVisible = !this.oldPasswordVisible
    },

    // 切换新密码可见性
    toggleNewPasswordVisibility() {
      this.newPasswordVisible = !this.newPasswordVisible
    },

    // 切换确认密码可见性
    toggleConfirmPasswordVisibility() {
      this.confirmPasswordVisible = !this.confirmPasswordVisible
    },

    // 密码验证
    validatePassword() {
      // 检查所有字段是否填写
      if (
        !this.formData.oldPassword ||
        !this.formData.newPassword ||
        !this.formData.confirmPassword
      ) {
        uni.showToast({
          title: '请填写所有密码字段',
          icon: 'none',
        })
        return false
      }

      // 检查两次密码是否一致
      if (this.formData.newPassword !== this.formData.confirmPassword) {
        uni.showToast({
          title: '两次输入的新密码不一致',
          icon: 'none',
        })
        return false
      }

      // 检查新旧密码是否相同
      if (this.formData.oldPassword === this.formData.newPassword) {
        uni.showToast({
          title: '新密码不能与当前密码相同',
          icon: 'none',
        })
        return false
      }

      return true
    },

    // 修改密码
    async changePassword() {
      // 表单验证
      if (!this.validatePassword()) {
        return
      }

      this.isLoading = true
      uni.showLoading({
        title: '修改中...',
      })

      try {
        // 获取用户ID
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo) {
          throw new Error('获取用户信息失败，请重新登录')
        }

        const userInfoObj = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
        const userId = userInfoObj.id

        if (!userId) {
          throw new Error('获取用户ID失败，请重新登录')
        }

        // 调用修改密码API，参数名与后端接口对应
        const res = await updatePassword({
          id: userId,
          oldpassword: this.formData.oldPassword,
          password: this.formData.newPassword,
        })

        if (res.statusCode === 200 && res.data.code === 200) {
          // 成功修改密码
          uni.showToast({
            title: '密码修改成功',
            icon: 'success',
          })

          // 重置表单
          this.formData = {
            oldPassword: '',
            newPassword: '',
            confirmPassword: '',
          }

          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(res.data.message || '修改密码失败')
        }
      } catch (error) {
        // 处理错误
        console.error('修改密码失败', error)
        uni.showToast({
          title: error.message || '修改密码失败，请重试',
          icon: 'none',
        })
      } finally {
        this.isLoading = false
        uni.hideLoading()
      }
    },
  },
}
</script>

<style lang="scss">
// 薰衣草紫主题色
$theme-color: #9370db;
$light-theme-color: #e6e6fa;
$text-color: #333333;
$border-color: #eeeeee;

.password-container {
  min-height: 100vh;
  background-color: #f8f8f8;

  .header {
    background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
    padding: 40rpx 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }

  .password-form {
    background-color: #ffffff;
    margin: 20rpx;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .form-item {
      margin-bottom: 30rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .form-label {
        display: block;
        font-size: 28rpx;
        color: $text-color;
        margin-bottom: 12rpx;
        font-weight: 500;
      }

      .password-input-wrapper {
        position: relative;
        width: 100%;

        .form-input {
          width: 100%;
          height: 80rpx;
          border: 2rpx solid $border-color;
          border-radius: 8rpx;
          padding: 0 120rpx 0 20rpx;
          font-size: 28rpx;
          box-sizing: border-box;
        }

        .toggle-visibility {
          position: absolute;
          right: 20rpx;
          top: 50%;
          transform: translateY(-50%);
          color: $theme-color;
          font-size: 26rpx;
          z-index: 1;
        }
      }

      .password-tip {
        display: block;
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }
    }
  }

  .button-section {
    padding: 40rpx;

    .save-button {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(to right, $theme-color, #8067dc);
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 12rpx rgba(147, 112, 219, 0.4);

      &:active {
        opacity: 0.9;
      }

      &::after {
        border: none;
      }

      &[disabled] {
        background: #cccccc;
        box-shadow: none;
        opacity: 0.8;
      }
    }
  }
}
</style>
